<template>
  <div class="user-info">
    <div class="header-info">
      <div class="avatar-box">
        <el-upload
          :show-file-list="false"
          action="https://api.touce.com.cn/system/user/profile/avatar"
          :headers="{
            Authorization: jsCookie.get('token') || ''
          }"
          name="avatarfile"
          :before-upload="beforeUpload"
          :on-success="avatarUploaded"
          accept=".png, .jpg, .jpeg"
        >
        <div>
<img
            v-if="userInfo.avatar"
            :src="'https://api.touce.com.cn' + userInfo.avatar"
            class="avatar"
          />
          <img v-else src="@/assets/image/tc_logo_m.png" />
        </div>
          <!-- <img style="height:40px;width:40px;position: fixed;top:56px" src="@/assets/image/vipup.png"/> -->
        </el-upload>

      </div>
       <!-- <img style="height:40px;width:40px;position: absolute;left: 496px;
    top: 130px;" src="@/assets/image/vipup.png"/> -->

      <div class="info">
        <p class="username">
          <div style="display:flex;flex-direction: column;">
            <div  style="display:flex;flex-direction: row;align-items: center;">
              <span>{{ userInfo.nickName }}</span>
          <img style="height:20px;width:20px;margin:0 10px" src="../../../assets/image/vipup.png"/>
          <span style="color:rgb(169, 119, 55)" v-if="userInfo.vip==1">VIP</span>
          <span style="color:rgb(169, 119, 55)" v-if="userInfo.vip==2">SVIP</span>
          <span style="color:rgb(169, 119, 55)" v-if="userInfo.vip==3">企业会员</span>

            </div>
          <span style="color:#ADADAD">{{userInfo.vipExpirationTime}}到期</span>

          </div>
          <el-tooltip
            class="box-item"
            effect="dark"
            :content="vipIconHoverTip"
            placement="top"
          >
            <svg-icon
              v-if="userInfo.vip == 0"
              class="ml-2"
              name="userVip"
              size="20px"
            />
            <svg-icon
              v-if="userInfo.vip == 1"
              class="ml-2"
              name="userVip"
              size="20px"
              color="#f3b361"
            />
            <svg-icon
              v-if="userInfo.vip == 2"
              class="ml-2"
              name="svip"
              color="#f3b361"
              size="20px"
            />
          </el-tooltip>
        </p>
        <div class="join-vip">
          <svg-icon name="vip" size="16px" />
          <p class="mx-2" style="color: #FFFFFF">会员升级</p>
          <div class="btn" @click="openVip">了解详情</div>
        </div>
      </div>
    </div>
    <div class="base-info">
      <div class="title">
        <p>基本信息</p>
      </div>
      <el-divider />
      <div class="info-records">
      <p style="text-align: right;cursor: pointer;" @click="saveInfo" v-if="editName||editSex">保存</p>
        <div class="record-item">
          <span class="label">用户昵称</span>
          <span v-if="!editName" class="content">{{ userInfo.nickName }}</span>
          <el-input v-else v-model="form.nickName" style="width: 140px" placeholder="请输入昵称" />
          <el-icon style="margin-left:5px" v-if="!editName" @click="openEidtName" :size="20">
            <Edit />
          </el-icon>
        </div>
        <div class="record-item">
          <span class="label">用&nbsp;&nbsp;户&nbsp;&nbsp;ID</span>
          <span class="content">{{ userInfo.userId }}</span>
        </div>
        <div class="record-item">
          <span class="label"
            >性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</span
          >
          <span v-if="!editSex" class="content">{{ userInfo.sex == "0" ? "男" : userInfo.sex == "1" ? "女" : "未知" }}</span>
          <el-radio-group v-else v-model="form.sex" class="ml-4">
            <el-radio value="0" size="small">男</el-radio>
            <el-radio value="1" size="small">女</el-radio>
            <el-radio value="2" size="small">未知</el-radio>
          </el-radio-group>
          <el-icon style="margin-left:5px" v-if="!editSex" @click="openEditSex" :size="20">
            <Edit />
          </el-icon>
        </div>
        <div class="record-item">
          <span class="label">手&nbsp;&nbsp;机&nbsp;&nbsp;号</span>
          <span class="content">{{ userInfo.phonenumber }}</span>
        </div>
        <div class="record-item">
          <span class="label">入站时间</span>
          <span class="content">{{ userInfo.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { usePersonalInfoHooks } from "./hooks";
import jsCookie from "js-cookie";
import { ref,reactive } from "vue";
import {editUser} from '../../../service/user/index'
import { useUserStore } from "../../../store/user"

  const userStore = useUserStore()

const { openVip, vipIconHoverTip, userInfo, beforeUpload, avatarUploaded } =
  usePersonalInfoHooks();
  const form=reactive({
     nickName:userInfo.value.nickName,
     sex:userInfo.value.sex
  })
const editName = ref(false)
const editSex = ref(false)

const openEidtName = ()=>{
  editName.value = !editName.value
}
const openEditSex = ()=>{
  editSex.value = !editSex.value
}
const saveInfo = ()=>{
  editUser(form).then(res=>{
    if(res.code==200){
      userStore.getUserInfo()
      editName.value = false
      editSex.value = false
    }
  })
}
</script>

<style scoped lang="postcss">
.user-info {
  .header-info {
    @apply flex items-center bg-white py-6 px-4;
    .avatar-box {
      @apply rounded-full flex justify-center items-center overflow-hidden;
      width: 80px;
      height: 80px;
      box-shadow: 0 0 5px #999999;

    }
    .avatar {
      width: 65px;
      height: 65px;
    }
    .info {
      @apply ml-3;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .username {
        @apply flex items-center;

        font-size: 16px;
      }
      .join-vip {
        @apply flex items-center rounded-full;
        font-size: 16px;
        background: #1176e0;
        padding: 4px 10px;
        padding-right: 3px;
        .btn {
          @apply bg-white rounded-full px-3 py-1 cursor-pointer;
          background-color:#ffb020;
          color:#FFFFFF;
        }
      }
    }
  }
  .base-info {
    @apply mt-6 px-4 py-2 bg-white;
    .title {
      @apply font-bold;
      font-size: 18px;
    }
    .info-records {
      @apply px-2;
      .record-item {
        @apply mb-5;
        display:flex;
        align-items:center;
        .label {
          @apply mr-8;
        }
        .content {
          @apply text-black;
        }
      }
    }
  }
}
</style>
